import React from 'react'
import { Alert, Breadcrumb } from 'antd';
import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom';

const BreadCrumb = () => {
    const breadcrumbNameMap: Record<string, string> = {
        '/nav/system': '系统管理',
        '/nav/system/user': '用户管理',
        '/nav/system/role': '角色管理',
        '/nav/system/menu': '菜单管理',
        '/nav/system/dict': '字典管理',
      };
      const location = useLocation();
  const pathSnippets = location.pathname.split('/').filter((i) => i);

  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
      
    return (
      <Breadcrumb.Item key={url}>
        {breadcrumbNameMap[url]}
      </Breadcrumb.Item>
    );
  });
      const breadcrumbItems = [
        <Breadcrumb.Item key="home">
          <Link to="/nav/home">主页</Link>
        </Breadcrumb.Item>,
      ].concat(extraBreadcrumbItems);
  return (
    <div className="demo">
      <Breadcrumb>{breadcrumbItems}</Breadcrumb>
    </div>
  )
}

export default BreadCrumb